<template>
	<view>
		<u-navbar title="设置" backIconColor="#fff" titleColor="#fff" :background="background"></u-navbar>
		<view class="content">
			<u-cell-group>
				<!-- 换头像 todo -->
				<u-cell-item title="头像" :value-by-img="avater" @click="uploadAvater"></u-cell-item>
				<!-- 换昵称odo -->
				<u-cell-item title="昵称" :value="nickName" @click="updateNickName"></u-cell-item>
			</u-cell-group>
			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item title="手机号" :value="phoneNumber"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="btn-out">
				<button class="logout-btn" @click="logout">退出登录</button>
			</view>
		</view>
		<!-- 加一个底部的按钮区域 -->
		<u-popup v-model="showUpdateNickName" mode="center"  width="700rpx" height="200px" >
			<view style="padding: 20rpx; margin-top: 40rpx;">
				<u-input v-model="newNickName" :border="border" />
			</view>
			<view class="botBtn">
				<view class="bot-tiem">
				  <u-button  size="medium" type="success"@click="confirmNickName">确认</u-button>	
               </view>
			   <view class="bot-tiem">
				   <u-button size="medium" style="warning" @click="closePopup">取消</u-button>
			   </view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: this.TopColor,
				avater: "",
				nickName: "",
				phoneNumber: "",
				showUpdateNickName:false,
				newNickName:""
			}
		},
		onLoad() {

		},
		onShow() {
			this.updateUserInfo()
		},
		methods: {
			updateUserInfo() {
				const userInfo = this.$db.userInfo()
				console.log("设置页面的用户信息：", userInfo)
				if (userInfo) {
					this.avater = userInfo.avatar
					this.nickName = userInfo.nickName
					this.phoneNumber = userInfo.phoneNumber
				}
			},
			closePopup(){
				this.showUpdateNickName = false
			},
			//推出登录
			logout() {
				console.log("退出登录")
				this.$db.del('userInfo')
				this.$common.jumpToLogin();
			},
			uploadAvater() {
				console.log("上传头像")
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						
						const userInfo = this.$db.userInfo()
						const userInfoStr = this.$http.base64.encode(JSON.stringify(userInfo));
						const token = this.$db.token();
						uni.uploadFile({
							url: this.$http.domain + "/user/updateAvatar", //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'avatar',
							header: {
								"Content-Type": "multipart/form-data",
								"Cookie": userInfoStr,
								"Authorization": token
							},
							success: (res) => {
								let data = JSON.parse(res.data)
								userInfo.avatar = data.data.avatar
								this.$db.set("userInfo", userInfo)
								this.updateUserInfo()
							}
						});
					}
				});
			},
			updateNickName() {
				console.log("修改用户昵称")
				this.showUpdateNickName = true

			},
			async confirmNickName(){
				let _this = this
				const userInfoPromise = await this.$http.post("/user/updateUserInfo",{
					nickName:_this.newNickName
				})
				const userInfo = await userInfoPromise;
				console.log("修改用户昵称",userInfo.data)
				this.$db.set("userInfo", userInfo.data)
				this.updateUserInfo()
				this.showUpdateNickName = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ededed;
	}

	.content {
		padding: 20rpx;
	}

	.btn-out {
		margin-top: 450rpx;
		padding: 0 30rpx;

	}

	/* 加一个底部的按钮区域 */
	.logout-btn {

		color: #fff;
		/* 设置文字颜色 */
		border: none;
		/* 移除边框样式 */
		padding: 0rpx 40rpx;
		/* 设置内边距 */
		font-size: 30rpx;
		/* 设置字体大小 */
		border-radius: 15rpx;
		/* 设置圆角 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		/* 添加阴影效果 */
		background-color: #8dcdff;
	}
	.botBtn{
		margin-top: 100rpx;
		display: flex;
		flex-direction: row;
		padding: 20rpx;
		justify-content: space-around;
		
	}
	.bot-tiem{
		flex: 40%;
		text-align: center;
		
	}

</style>